<template>
	<view>
		<!-- 用户主页 -->
		<view class="personal-info__header">
			<!-- 背景图片 -->
			<view class="personal-info__header-bg" @click="previewImage(user_info.userbg)">
				<image class="personal-info__header-bg-image" :src="user_info.userbg" mode="aspectFill"></image>
			</view>
			<!-- 左边头像(1/4部分在背景上)  右边 关注数量 粉丝数量 帖子数量 -->
			<view class="personal-info__header-content">
				<view class="personal-info__header-content-left">
					<image class="personal-info__header-content-left-avatar" :src="user_info.usertx" @click="previewImage(user_info.usertx)"></image>
				</view>
				<view class="personal-info__header-content-right">
					<view class="personal-info__header-content-right-item">
						<text class="personal-info__header-content-right-item-num">{{ user_info.followerscount }}</text>
						<text class="personal-info__header-content-right-item-text">关注</text>
					</view>
					<view class="personal-info__header-content-right-item">
						<text class="personal-info__header-content-right-item-num">{{ user_info.fanscount }}</text>
						<text class="personal-info__header-content-right-item-text">粉丝</text>
					</view>
					<view class="personal-info__header-content-right-item">
						<text class="personal-info__header-content-right-item-num">{{ user_info.postcount }}</text>
						<text class="personal-info__header-content-right-item-text">帖子</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 用户信息展示 -->
		<view class="personal-info__user-info">
			<view class="personal-info__user-info-name">{{ user_info.nickname }}</view>
			<view class="personal-info__user-bagge">
				<!-- 展示等级 -->
				<u-tag :text="user_info.hierarchy" plain size="mini" type="warning" style="margin-right:10upx"></u-tag>
				<!-- 循环勋章 -->
				<image class="personal-info__user-bagge-icon" v-for="(item, index) in user_info.badge" :key="index" :src="item.icon"></image>
			</view>
			<!-- 个性签名 -->
			<view class="personal-info__user-info-signature" v-if="user_info.signature != ''">{{ user_info.signature }}</view>
			<view class="personal-info__user-info-signature" v-else>这个家伙很懒，什么都没留下</view>
			<!-- 展示性别 和 地址 中间用竖线隔开 -->
			<view class="personal-info__user-info-signature" style="color: #666;">
				{{ user_info.sexName }}
				<view class="text-shu"></view>
				{{ user_info.ipaddress }}
			</view>
			<!-- 这是两个按钮 消息和关注 -->
			<view class="personal-info__user-info-btn" v-if="userid != login_user_id">
				<u-button type="success" shape="circle" :plain="true" text="消息" @click="to_paper_list(user_info.id)"></u-button>
				<u-button type="success" shape="circle" text="关注" v-if="follow_status == 1" @click="to_follow_users()"></u-button>
				<u-button type="success" shape="circle" :plain="true" text="已关注" v-else @click="to_follow_users()"></u-button>
			</view>
		</view>
		<u-sticky>
			<u-tabs :list="tag_list" :activeStyle="{ color: '#5AC725' }" lineColor="#5AC725" @click="get_tag_ingo" style="margin-left:20upx;background-color:#fff;"></u-tabs>
		</u-sticky>
		<!-- 通过tab选择展示不同的页面效果 -->
		<!-- 帖子 -->
		<post-list :list="data_list" v-if="tag_key == 0"></post-list>
		<u-loadmore v-if="tag_key == 0 && data_list.length > 0" :line="true" :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText" :nomore-text="nomoreText" style="padding-bottom:30upx" @loadmore="loadmore" />
		<!-- 评论 -->
		<view class="comment-list" v-if="tag_key == 1">
			<view class="comment-item" v-for="(item, index) in data_list" :key="index" @click="toPostDetail(item.postid)">
				<view class="comment-item-left">
					<image class="comment-item-left-tx" :src="item.usertx"></image>
				</view>
				<view class="comment-item-right">
					<view class="comment-item-right-top">
						<view class="comment-item-right-top-name">
							<text> {{ item.nickname }}</text>
							<!-- 循环展示徽章 -->
							<view class="comment-item-right-top comment-item-right-icon">
								<image class="comment-item-right-icon-info" v-for="(item, index) in item.badge" :key="index" :src="item.icon"></image>
							</view>
							<!-- 昵称 后面加ip地址 -->
							<text class="comment-item-right-top-name-ip"> IP:({{ item.ip_address }})</text>
						</view>
					</view>
					<text class="comment-item-right-top-time">{{ item.time_ago }}</text>
					<!-- 判断是不是回复其他人的内容 -->
					<view class="comment-item-right-replay" v-if="item.parentid != 0">
						<view>回复 {{ item.parentnickname }}</view>
						<view class="comment-item-content">
							<text>{{ item.parentcontent }}</text>
						</view>
					</view>
					<!-- 评论内容 -->
					<view class="comment-item-content">
						<text>{{ item.content }}</text>
					</view>
					<!-- 评论图片 多张 -->
					<view class="comment-item-right-img" v-if="item.image_path.length > 0">
						<u--image :showLoading="true" v-for="(img, key) in item.image_path" :key="key" :src="img" width="80px" height="80px" radius="10"></u--image>
					</view>
				</view>
			</view>
			<u-loadmore v-if="data_list.length > 0" :line="true" :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText" :nomore-text="nomoreText" @loadmore="loadmore" />
			<u-empty v-if="data_list.length == 0" mode="data"></u-empty>
		</view>
		<!-- 关注列表 -->
		<view class="follow-list" v-if="tag_key == 2 || tag_key == 3">
			<!-- 左边头像和昵称 右边关注按钮的样式 全部在一排 -->
			<view class="follow-item" v-for="(item, index) in data_list" :key="index" @click="to_personal_info(item.id)">
				<view class="follow-item-left">
					<image class="follow-item-tx" :src="item.usertx"></image>
					<view class="follow-item-nickname-list">
						<view class="follow-item-nickname">
							<text>{{ item.nickname }}</text>
							<!-- 展示等级 -->
							<u-tag :text="user_info.hierarchy" plain size="mini" type="warning" style="margin-right:10upx"></u-tag>
						</view>
						<view class="follow-item-nickname-bagge">
							<!-- 循环勋章 -->
							<image class="follow-item-nickname-bagge-icon" v-for="(value, key) in item.badge" :key="key" :src="value.icon"></image>
						</view>
					</view>
				</view>
			</view>
			<u-loadmore v-if="data_list.length > 0" :line="true" :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText" :nomore-text="nomoreText" @loadmore="loadmore" />
			<u-empty v-if="data_list.length == 0" mode="data"></u-empty>
		</view>
		<!-- 返回顶部 -->
		<u-back-top :scroll-top="scrollTop" z-index="1000"></u-back-top>
	</view>
</template>

<script>
import postList from '@/components/post-list/post-list'
export default {
	//引入post-list组件
	components: {
		postList
	},
	data() {
		return {
			userid: '', //用户id
			user_info: {},
			follow_status: 1, //0未关注 1已关注
			login_user_id: '', //登录用户id
			scrollTop: 0,
			tag_key: 0,
			tag_list: [
				{
					key: 0,
					name: '帖子',
				},
				{
					key: 1,
					name: '评论',
				}
			],
			follow_list: [], //关注列表 用户更改关注状态时使用
			formData: {
				limit: 10,  //每页10条数据
				page: 1,   //第几页
			},
			data_list: [], //列表数据
			status: 'loadmore',
			loadingText: '努力加载中',
			loadmoreText: '轻轻上拉',
			nomoreText: '已经到底了哈',
			urls: [],
		}
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	onLoad(options) {
		this.login_user_id = uni.getStorageSync('userid');
		//未登录跳转到登录页面
		if (this.login_user_id == '') {
			uni.navigateTo({
				url: '/pages/login/login'
			})
			return false;
		}
		this.userid = options.id;
		this.get_user_information(options.id);
		this.get_posts_list();
		//判断是否是自己的主页
		if (this.userid == this.login_user_id) {
			this.tag_list.push({
				key: 2,
				name: '关注',
			});
			this.tag_list.push({
				key: 3,
				name: '粉丝',
			});
		}
	},
	onReachBottom() {
		this.get_posts_list();
		this.status = 'loading';
	},
	onPullDownRefresh() {
		//调用获取数据方法
		this.get_user_information(this.userid);
		if (this.tag_key == 0) {
			this.get_posts_list();
		} else if (this.tag_key == 1) {
			this.get_list_comments();
		} else if (this.tag_key == 2) {
			this.get_follow_list();
		} else if (this.tag_key == 3) {
			this.get_fan_list();
		}
		setTimeout(() => {
			//结束下拉刷新
			uni.stopPullDownRefresh();
		}, 1000);
	},
	methods: {
		// 获取用户信息
		async get_user_information(id) {
			let get_user_information = await this.$api.get_user_information({ userid: id });
			if (get_user_information.code == 1) {
				this.user_info = get_user_information.data;
				this.follow_status = get_user_information.data.follow_status == 0 || get_user_information.data.follow_status == 2 ? 0 : 1;
			}
		},
		// 关注用户
		async to_follow_users() {
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			let follow_users = await this.$api.follow_users({
				followedid: this.userid
			});
			if (follow_users.code == 1) {
				this.follow_status = this.follow_status == 0 ? 1 : 0;
				this.$u.toast(follow_users.msg);
				if (this.follow_status == 1) {
					this.user_info.fanscount--;
				} else {
					this.user_info.fanscount++;
				}
			}
		},
		get_tag_ingo(item) {
			this.formData = {
				limit: 10,  //每页10条数据
				page: 1,   //第几页
			};
			this.status = 'loadmore';
			this.tag_key = item.key;
			this.data_list = [];
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			if (item.key == 0) {
				this.get_posts_list();
			} else if (item.key == 1) {
				this.get_list_comments();
			} else if (item.key == 2) {
				this.get_follow_list();
			} else if (item.key == 3) {
				this.get_fan_list();
			}
		},
		loadmore() {
			this.status = 'nomore';
		},
		// 获取用户帖子列表
		async get_posts_list() {
			this.formData.userid = this.userid;
			this.formData.status = 0;
			let get_posts_list = await this.$api.get_posts_list(this.formData);
			if (get_posts_list.code == 1) {
				if (this.formData.page > get_posts_list.data.pagecount) {
					this.status = 'nomore';
				} else {
					this.data_list = this.data_list.concat(get_posts_list.data.list);
					if (this.formData.page == get_posts_list.data.pagecount) {
						this.status = 'nomore';
					} else {
						this.status = 'loadmore';
					}
					this.formData.page++;
				}
			}
		},
		//获取评论列表
		async get_list_comments() {
			this.formData.userid = this.userid;
			this.formData.status = 1;
			let get_list_comments = await this.$api.get_list_comments(this.formData);
			if (get_list_comments.code == 1) {
				if (this.formData.page > get_list_comments.data.pagecount) {
					this.status = 'nomore';
				} else {
					this.data_list = this.data_list.concat(get_list_comments.data.list);
					if (this.formData.page == get_list_comments.data.pagecount) {
						this.status = 'nomore';
					} else {
						this.status = 'loadmore';
					}
					this.formData.page++;
				}
			}
		},
		//获取关注列表
		async get_follow_list() {
			let get_follow_list = await this.$api.get_follow_list(this.formData);
			if (get_follow_list.code == 1) {
				if (this.formData.page > get_follow_list.data.pagecount) {
					this.status = 'nomore';
				} else {
					this.data_list = this.data_list.concat(get_follow_list.data.list);
					if (this.formData.page == get_follow_list.data.pagecount) {
						this.status = 'nomore';
					} else {
						this.status = 'loadmore';
					}
					this.formData.page++;
				}
			}
		},
		//获取关注列表
		async get_fan_list() {
			let get_fan_list = await this.$api.get_fan_list(this.formData);
			if (get_fan_list.code == 1) {
				if (this.formData.page > get_fan_list.data.pagecount) {
					this.status = 'nomore';
				} else {
					this.data_list = this.data_list.concat(get_fan_list.data.list);
					if (this.formData.page == get_fan_list.data.pagecount) {
						this.status = 'nomore';
					} else {
						this.status = 'loadmore';
					}
					this.formData.page++;
				}
			}
		},
		// 跳转到帖子详情
		toPostDetail(id) {
			uni.navigateTo({
				url: '/pages/news/post-detail/post-detail?id=' + id
			})
		},
		to_personal_info(id) {
			console.log(12312);
			uni.navigateTo({
				url: '/pages/member/personal_info?id=' + id
			})
		},
		to_paper_list(userid) {
			uni.navigateTo({
				url: '/pages/paper/paper-list?userid=' + userid
			})
		},
		//点击放大的图片
		previewImage(urls) {
			this.urls = [];
			this.urls.push(urls);
			uni.previewImage({
				current: 0,
				urls: this.urls
			});
		},
	}
}
</script>

<style lang="less">
.personal-info__header {
	position: relative;
	height: 400upx;

	.personal-info__header-bg {
		height: 300upx;

		.personal-info__header-bg-image {
			width: 100%;
			height: 100%;
		}
	}

	.personal-info__header-content {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-end;
		padding-bottom: 20upx;

		.personal-info__header-content-left {
			width: 25%;
			height: 100%;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: flex-end;

			.personal-info__header-content-left-avatar {
				width: 140upx;
				height: 140upx;
				border-radius: 50%;
				border: 2upx solid #fff;
				background-color: #fff;
			}
		}

		.personal-info__header-content-right {
			width: 75%;
			height: 100%;
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			align-items: flex-end;

			.personal-info__header-content-right-item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.personal-info__header-content-right-item-num {
					font-size: 32upx;
					color: #000;
				}

				.personal-info__header-content-right-item-text {
					font-size: 24upx;
					color: #000;
				}
			}
		}
	}
}

.personal-info__user-info {
	margin-top: 20upx;
	padding: 20upx;
	padding-left: 40upx;

	.personal-info__user-info-name {
		font-size: 30upx;
		color: #000;
		font-weight: bold;
	}

	.personal-info__user-bagge {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		margin: 20upx 0;

		.personal-info__user-bagge-icon {
			width: 40upx;
			height: 40upx;
			margin-right: 10upx;
		}
	}

	.personal-info__user-info-signature {
		display: flex;
		align-items: center;
		font-size: 22upx;
		color: #000;
		margin-top: 10upx;

		.text-shu {
			width: 1upx;
			height: 15upx;
			background-color: #666;
			margin: 0 10upx;
		}
	}

	.personal-info__user-info-btn {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		margin-top: 20upx;

		.u-button {
			margin-right: 20upx;
		}
	}
}

/* 评论样式 */
.comment-list {
	padding: 20upx;
	padding-top: 0;
	padding-bottom: 0;
	background-color: #fff;
	padding-bottom: 30upx;

	.comment-item {
		display: flex;
		padding: 30upx 0;
		border-bottom: 1px solid #f5f6f7;

		.comment-item-left {
			width: 80upx;
			height: 80upx;
			border-radius: 50%;
			/* overflow: hidden; */

			.comment-item-left-tx {
				width: 100%;
				height: 100%;
			}
		}

		.comment-item-right {
			flex: 1;
			margin-left: 20upx;

			.comment-item-right-top {
				display: flex;
				justify-content: space-between;

				.comment-item-right-top-name {
					font-size: 30upx;
					color: #333;
					display: flex;
					align-items: center;
				}

				.comment-item-right-icon {
					display: flex;
					align-items: center;
					justify-content: flex-start;

					.comment-item-right-icon-info {
						width: 30upx;
						height: 30upx;
						object-fit: cover;
						overflow: hidden;
						backface-visibility: hidden;
						display: inline-block;
						margin-left: 10upx;
					}
				}

				.comment-item-right-top-name-ip {
					font-size: 18upx;
					color: #999;
					padding: 6upx 14upx;
					background-color: #e7e7e7;
					border-radius: 4px;
					margin-left: 10upx;
				}
			}

			.comment-item-right-top-time {
				font-size: 24upx;
				color: #999;
			}

			.comment-item-right-replay {
				padding: 10upx 10upx 15upx 20upx;
				font-size: 28upx;
				color: #969696;
				background-color: #F0F0F0;
				border-radius: 10upx;
				margin-bottom: 15upx;

				.comment-item-content {
					margin-top: 20upx;
					font-size: 28upx;
					color: #666666;
				}
			}

			.comment-item-right-icon .comment-item-content {
				margin-top: 10upx;
				font-size: 28upx;
				color: #333;
			}

			.comment-item-right-img {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				margin-top: 10upx;

				.u-image {
					margin-right: 10upx;
					margin-bottom: 10upx;
				}
			}
		}
	}
}

/* 关注列表样式 */
.follow-list {
	padding: 20upx;
	padding-top: 0;
	padding-bottom: 0;
	background-color: #fff;
	padding-bottom: 30upx;

	.follow-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30upx 20upx;
		border-bottom: 1px solid #f5f6f7;

		.follow-item-left {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;

			.follow-item-tx {
				width: 70upx;
				height: 70upx;
				border-radius: 50%;
				overflow: hidden;
				margin-right: 20upx;
			}

			.follow-item-nickname-list {
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: space-between;

				.follow-item-nickname {
					font-size: 25upx;
					color: #333;
					display: flex;
					align-items: center;

					.u-tag--mini {
						height: 30upx;
						line-height: 30upx;
						padding: 0 5px;
						margin-left: 10upx;
					}
				}

				.follow-item-nickname-bagge {
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					align-items: center;
					margin-top: 5px;

					.follow-item-nickname-bagge-icon {
						width: 30upx;
						height: 30upx;
						object-fit: cover;
						overflow: hidden;
						backface-visibility: hidden;
						display: inline-block;
						margin-left: 10upx;
					}
				}
			}


		}

		.follow-item-right {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;

			.u-button {
				width: 120upx;
				height: 60upx;
				margin-right: 20upx;
			}
		}
	}
}
</style>
